<template>
	<view>
		<!-- 收入比例 -->
		<view class="sales_double_income">
			<view class="sales_double_income-title">所属河道:</view>
			<input class="sales_double_income-input" placeholder="请输入所属河道" />
			<!-- <view class="sales_double_income-unit">%</view> -->
		</view>
		<view class="sales_double_income">
			<view class="sales_double_income-title">所属河段:</view>
			<input class="sales_double_income-input" placeholder="请输入所属河段" />
			<!-- <view class="sales_double_income-unit">%</view> -->
		</view>
		<view class="sales_double_income">
			<view class="sales_double_income-title">违法类型:</view>
			<radio-group name="gender" class="sales_double_income-radio">
				<label v-for="(item,index) in breakItems" :key="index">
					<radio :id="item.name" :value="item.name" /><text style="margin-right:16upx;">{{item.value}}</text>
				</label>
			</radio-group>
		</view>
		<view class="sales_double_income">
			<view class="sales_double_income-title">上传人:</view>
			<input class="sales_double_income-input" placeholder="请输入上传人" />
			<!-- <view class="sales_double_income-unit">m</view> -->
		</view>
		<view class="sales_double_income">
			<view class="sales_double_income-title">上传时间:</view>
			<picker class="sales_double_income-radio" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
				<view class="uni-input">{{date}}</view>
			</picker>
		</view>
		<view class="sales_double_income">
			<view class="sales_double_income-title">来源:</view>
			<radio-group name="gender" class="sales_double_income-radio">
				<label v-for="(item,index) in radioItems" :key="index">
					<radio :id="item.name" :value="item.name" /><text style="margin-right:16upx;">{{item.value}}</text>
				</label>
			</radio-group>
		</view>
		<view class="sales_double_income">
			<view class="sales_double_income-title">违法日期:</view>
			<picker class="sales_double_income-radio" mode="date" :value="time" :start="startDate" :end="endDate" @change="bindTimeChange">
				<view class="uni-input">{{time}}</view>
			</picker>
		</view>
		<view class="sales_double_income">
			<view class="sales_double_income-title">处理办法:</view>
			<view class="uni-textarea">
				<textarea auto-height />
				</view>	
		</view>

		<view class="sales_double_income">
			<view class="sales_double_income-title">违法描述:</view>
			<view class="uni-textarea">
				<textarea auto-height />
				</view>		
		</view>
		<view class="sales_double_income">
			<view class="sales_double_income-title">上传图片:</view>
			<sunui-upimg @change="getImageInfo" :upload_auto="true" :upimg_move="true" ref="upimg"></sunui-upimg>	
		</view>
		<!-- <view class="sales_double_income" >
			<view class="sales_double_income-title">上传附件:</view>
			<file-uploader class="sales_double_income-radio" :limitsize="2048"></file-uploader>
		</view> -->
		<!-- 保存 -->
		<view class="save_btn">
		  <view class="save_btn-inner" @click="handleSave">保存设置</view>
		</view>
	</view>
</template>

<script>
	import sunUiUpimg from '@/components/sunui-upimg/sunui-upimg.vue';
	import fileUploader from '@/components/fileUploader/fileUploader.vue';
	function getDate(type) {
		const date = new Date();
	
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
	
		if (type === 'start') {
			year = year - 60;
		} else if (type === 'end') {
			year = year + 2;
		}
		month = month > 9 ? month : '0' + month;;
		day = day > 9 ? day : '0' + day;
	
		return `${year}-${month}-${day}`;
	}
	export default {
		// 工具
		// name: "河道创建",
		data() {
			return {
				title: 'label',
				radioItems: [{
						name: 'USA',
						value: '群众举报'
					},
					{
						name: 'CHN',
						value: '巡查发现',
						checked: 'true'
					}
				],
				breakItems:[
					    {
							name: 'USA',
							value: '一般违法'
						},
						{
							name: 'CHN',
							value: '严重违法',
							checked: 'true'
						}
				],
                date: getDate({
                	format: true
                }),
				time: getDate({
					format: true
				}),
                startDate:getDate('start'),
                endDate:getDate('end'),
				auto: false
			}
		},
		components: {
			'sunui-upimg': sunUiUpimg,
			'file-uploader': fileUploader
		},
		mounted() {
			// 关于删除图标样式更改,可以去源码：13行
			// 是否显示删除图标 - upimg_move:true/false,默认true
			// 是否自动上传 - upload_auto:true/false，默认自动上传. 如需手动上传则置为false,再置为true
		
			// 这里是上传服务器的后端url(这里是后端签名等，然后前端直接调用->这种方式支持App/小程序/h5)
			this.$refs.upimg.url = 'https://a3.dns06.net.cn/app/index.php?i=2&c=entry&a=wxapp&do=Upload_qiniu_b&m=jzwx_a';
			// 上传数量控制
			this.$refs.upimg.upload_count = 4;
			// 图片以及添加宽高
			this.$refs.upload_img_wh = 162;
			// 上传容量控制,默认1M(暂时有缺陷)
			this.$refs.upload_max = 1;
			// 这里放置服务器预览图片链接地址
			// this.$refs.upimg.upload_before_list = [{
			// 	path: 'http://a3q.dns06.net.cn/15742420068480.png'
			// }];
		},
		methods: {
			handleJump(type) {
				uni.navigateTo({
					url: "../tabbar-4/cpn/create-river"
				})
			},
			getImageInfo(e) {
				// 上传图片或者删除图片返回信息
				console.log('返回图片信息：', e);
			},
			handleSave() {
				// upload_auto为true才可上传(手动上传)
				// this.$refs.upimg.upload(this.auto = true);
				uni.showToast({
					title: '保存成功'
				});
			},
			bindDateChange(e){
				this.date = e.target.value
			},
			bindTimeChange(e){
				this.time = e.target.value
			},
		}
	};
</script>

<style >
	page {
		background: #F4F5F6;
		padding-bottom: 152upx;
	}
</style>
	
<style lang="scss" scoped>

	.uni-form-item {
		display: flex;
		width: 100%;
		padding: 10upx 0;
	}

	.uni-form-item .title {
		font-size: 32upx;
		padding: 10upx 25upx;
	}
	.uni-textarea{
		width:79%;
		background:#FFF;
	}
	.uni-textarea textarea{
		width:96%;
		padding:18upx 9%;
		line-height:1.6;
		font-size:28upx;
		height:150upx;
	}
	
	// 收入比例
	.sales_double {
	  background: #f5f5f5;
	  &_income {
	    @include flexLine;
	    @extend .model;
	    padding: 6upx 38upx;
	    &-title {
			font-size: 30upx;
	      font-weight: bold;
	    }
	    &-info {
	      box-sizing: content-box;
	      padding: 28upx;
	      width: 28upx;
	      height: 28upx;
	    }
	    &-input {
	      flex: 1;
	      height: 80upx;
	      text-align: right;
	      margin-right: 16upx;
	      font-size: 30upx;
	      // font-weight: bold;
	    }
	    &-unit {
	      font-size: 30upx;
	    }
		&-radio{
			flex: 1;
			height: 80upx;
			text-align: right;
			font-size: 30upx;
			margin-top: 34upx;
			&-name{
				width: 100upx;
			}
		}
	  }
	}
	// 模式
	.model {
	  overflow: hidden;
	  margin: 24upx;
	  border-radius: 16upx;
	  background: #fff;
	
	  &_switch {
	    position: relative;
	    padding: 30upx 38upx;
	    border-bottom: 1upx solid rgba(0, 0, 0, 0.06);
	
	    &-title {
	      font-size: 30upx;
	      font-weight: bold;
	      color: rgba(51, 51, 51, 1);
	    }
	    &-desc {
	      margin-top: 14upx;
	      font-size: 24upx;
	      color: rgba(153, 153, 153, 1);
	    }
	    &-info {
	      position: absolute;
	      top: 2upx;
	      left: 160upx;
	      box-sizing: content-box;
	      padding: 28upx;
	      width: 28upx;
	      height: 28upx;
	    }
	    switch {
	      position: absolute;
	      top: 14upx;
	      right: 10upx;
	      transform: scale(0.8);
	    }
	  }
	}
	// 保存
	.save_btn {
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  background: #fff;
	  &-inner {
	    margin: 24upx;
	    @include blueBtn;
	  }
	}
</style>
